<template>
  <el-form
      ref="goodsFormRef"
      :model="goodsForm"
      :rules="rules"
      label-width="120px"
      class="demo-goodsForm"
      :size="formSize"
      status-icon
  >
<!--11111111111111111111111111-->
    <el-form-item label="类型" prop="assort">
      <el-select v-model="goodsForm.assort" placeholder="请选择计算机类型">
        <el-option label="台式" value="台式" />
        <el-option label="笔记本" value="笔记本" />
      </el-select>
    </el-form-item>

<!--    &lt;!&ndash; 图片上传 &ndash;&gt;-->
<!--    <el-form-item label="图片" prop="picture">-->
<!--      <el-upload class="avatar-uploader" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">-->
<!--        <img v-if="goodsForm.picture" :src="goodsForm.picture" class="avatar" />-->
<!--        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>-->
<!--      </el-upload>-->
<!--    </el-form-item>-->

    <el-form-item label="库存" prop="stock" placeholder="请输入库存">
      <el-input v-model="goodsForm.stock" />
    </el-form-item>

    <el-form-item label="名称" prop="name" >
      <el-input v-model="goodsForm.name" />
    </el-form-item>

    <el-form-item label="价格"  prop="price">
      <el-input v-model="goodsForm.price" />
    </el-form-item>

    <el-form-item label="创建时间" prop="createTime" required>
      <el-date-picker
          v-model="goodsForm.createTime"
          type="date"
          label="Pick a date"
          placeholder="Pick a date"
          style="width: 100%"/>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm(goodsFormRef)">
        创建
      </el-button>
      <el-button @click="resetForm(goodsFormRef)">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import {GoodsImpl,GoodsForm} from "@/type/GoodsAction";
import {addGoods} from "@/request/GoodsService";
// //引入二次封装的axios
// import request from "@/request";
//
// enum API {
//   //上传图片接口
//   UPLOAD_URL = '/saas-api/station/upload'
// }
// // 对外导出上传图片的接口
//  const reqUpload = (file:any) => {
//   // 创建了一个新的 FormData 对象，用于构建表单数据,并将file添加到FormData对象中
//   const formData = new FormData();
//   formData.append('file', file);
//   return request.post(API.UPLOAD_URL, formData);
// };
//
// //图片上传成功的钩子
// const handleAvatarSuccess: UploadProps['onSuccess'] = () => {
//   //图片上传成功,清除掉对应图片校验结果
//   goodsFormRef.value.clearValidate('imageUrl')
// }
// //上传图片组件->上传图片之前触发的钩子函数
// const beforeAvatarUpload: UploadProps['beforeUpload'] = async (rawFile: any) => {
//   //请求上传文件的接口
//   let res = await reqUpload(rawFile)
//   //将接口的地址赋值给表单并呈现
//   goodsForm.picture = res.data.url
//   //上传图片格式和大小要求  png|jpg  4M
//   if (rawFile.type !== 'image/png' || rawFile.type == 'image/jpg') {
//     ElMessage.error('上传文件格式务必PNG|JPG')
//     return false
//   } else if (rawFile.size / 1024 / 1024 > 4) {
//     ElMessage.error('上传文件大小小于4M')
//     return false
//   }
//   // 取消默认的上传请求
//   return false
// }


// ref 单个 变量 响应 对象
const formSize = ref('default')
const goodsFormRef = ref<FormInstance>()
// 多个变量reactive 响应
const  goodsForm = reactive(new GoodsImpl()).goodsform

const rules = reactive<FormRules<GoodsForm>>({
  //分类
  assort: [
    {
      required: true,
      message: '请选择玩具类型',
      // trigger: 'change'数据改变的时候触发
      trigger: 'change',
    },
  ],
  //库存
  stock: [
    //  trigger: 'blur' :失去焦点触发
    { required: true, message: 'Please input stock', trigger: 'blur' },
    { min: 0, max: 10, message: 'Length should be 0 to 10', trigger: 'blur' },
  ],

  name: [
    { required: true, message: 'Please input wj name', trigger: 'blur' },
    { min: 0, max: 10, message: 'Length should be 0 to 10', trigger: 'blur' },
  ],
  //图片
  picture: [
    { required: true, message: 'Please input wj picture', trigger: 'blur' },
    { min: 0, max: 10, message: 'Length should be 0 to 10', trigger: 'blur' },
  ],
  //价格
  price: [
    { required: true, message: 'Please input wj price', trigger: 'blur' },
    { min: 0, max: 10, message: 'Length should be 0 to 10', trigger: 'blur' },
  ],
  createTime: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a date',
      trigger: 'change',
    },
  ],
})


const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      //提交 局部刷新 then() 返回成功的时候调用
      goodsForm.createTime=JSON.stringify(goodsForm.createTime).substring(1,20).replace("T"," ");
          addGoods(goodsForm).then(
          function(response) {
            console.log(response);
            //response.data ==== 后台返回的对象 CommentReslut
            console.log("response.data = "+response.data);
            console.log("response.data.message = "+response.data.message);
            console.log("response.data.data = "+response.data.data);
          }
          )
      console.log('提交成功!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}))
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
